<template>
  <h2>姓名:{{ persion.name }}</h2>
  <h2>年龄:{{ persion.age }}</h2>
  <h2>父组件传递的消息:{{ msg }}</h2>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { reactive, onBeforeMount } from "vue";
export default {
  name: "Demo",
  beforeCreate() {
    console.log("beforeCreate。。。", this);
  },
  props: {
    msg: {
      type: String,
    },
    school: {
      type: String,
    },
  },

  setup(props, context) {
    console.log("props....", props);
    console.log("msg....", props.msg);
    console.log("context....", context);
    console.log("setup.......", this);

    let persion = reactive({
      name: "张三",
      age: 22,
    });
    function changeInfo() {
      persion.name += "!";
      persion.age++;
    }

    onBeforeMount(() => {
      console.log("onBeforeMount。。。。。", this);
    });

    return {
      persion,
      changeInfo,
    };
  },
};
</script>
